<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<link rel="stylesheet" href="css/top.css" />
<script type="text/javascript" src="js/top.js"></script>

<body>
<div class="nav">
	<div class="nav-left">
    	<img src="images/2.png" />
        <ul>
        	<li class="margin"><a href="#">社区</a></li>
            <li><a href="#">学习空间</a></li>
            <li class="margin"><a href="#">我的群组</a></li>
        </ul>
        <div class="nav-left-button">
        	<form action="">
            	<input type="submit" id="button1" value="搜索" />
                <input type="text" placeholder="搜索资源或话题" />
            </form>
        </div>
    </div>
    <div class="nav-right">
    	<button id="button2">意见反馈</button>
        <!--头像-->
        <div  class="nav-right-logo">
        	<div id="menu_title1" class="menu_title" onclick="openMenu(this)">
				<img src="images/4.jpg" />
				<div class="indicator" id="indicator1">
					<
				</div>
			</div>
			<div class="menu" id="menu1">
            	<div class="item">
					<a href="#" target="">昵称</a>
				</div>
				<div class="item">
					<a href="" target="">我的动态</a>
				</div>
				<li class="item_divider"></li>
				<div class="item">
					<a href="" target="">个人中心</a>
				</div>
                <div class="item">
					<a href="" target="">退出系统</a>
				</div>
			</div>
        </div>
        <!--消息提示-->
        <div class="nav-right-img">
        <ul>
        	<li>
            	<a href="#"><img src="images/3.png" /></a>
            	<ul>
                	<li><a>回复我的</a></li>
                    <li><a>收到的赞</a></li>
                </ul>
            </li>
        </ul>
        </div>
        
    </div>
</div>
    <!--**********************************************--->
    <div class="bottom">
   	<!--标题导航-->
	<div class="bottom-nav">
    	<span class="nav-title-bottom"><h2>学习空间</h2></span>
    </div>
    <!--选择-->
   <div class="tab">
   		<!--推荐空间-->
        <div>
            <input type="radio" id="r-1" name="tab" checked>
            <label for="r-1" class="label-1">推荐空间</label>
            <div class="mod-1">
            	<div class="top">
                    <ul>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">111111111rew</a></span>
                            <span class="item-writer"><a href="#">发布者1</a></span>
                            </div>
                        	<span class="time">2019-01-02</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">25555252525</a></span>
                            <span class="item-writer"><a href="#">发布者2</a></span>
                            </div>
                        	<span class="time">2019-03-23</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">33333333333居</a></span>
                            <span class="item-writer"><a href="#">发布者3</a></span>
                            </div>
                        	<span class="time">2018-06-10</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">44444444444</a></span>
                            <span class="item-writer"><a href="#">发布者4</a></span>
                            </div>
                        	<span class="time">2020-03-30</span>
                        </li>
                    </ul> 
                </div>
        </div>
        <!--查看空间-->
        <div>
            <input type="radio" id="r-2" name="tab">
            <label for="r-2" class="label-2">查看空间</label>
            <div class="mod-2">
               <div class="top">
                    <ul>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">111111111rew</a></span>
                            <span class="item-writer"><a href="#">发布者1</a></span>
                            </div>
                        	<span class="time">2019-01-02</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">25555252525</a></span>
                            <span class="item-writer"><a href="#">发布者2</a></span>
                            </div>
                        	<span class="time">2019-03-23</span>
                        </li>
                    </ul> 
                </div>
            </div>
        </div>
        <!--收藏空间-->
        <div>
            <input type="radio" id="r-3" name="tab">
            <label for="r-3" class="label-3">收藏空间</label>
            <div class="mod-3">
               <div class="top">
                    <ul>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">111111111rew</a></span>
                            <span class="item-writer"><a href="#">发布者1</a></span>
                            </div>
                        	<span class="time">2019-01-02</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">25555252525</a></span>
                            <span class="item-writer"><a href="#">发布者2</a></span>
                            </div>
                        	<span class="time">2019-03-23</span>
                        </li>
                    </ul> 
                </div>
            </div>
        </div>
        <!--我的空间-->
        <div>
            <input type="radio" id="r-4" name="tab">
            <label for="r-4" class="label-4">我的空间</label>
            <div class="mod-4">
               <div class="top">
                    <ul>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">111111111rew</a></span>
                            <span class="item-writer"><a href="#">发布者1</a></span>
                            </div>
                        	<span class="time">2019-01-02</span>
                        </li>
                        <li>
                        	<div class="item">
                            <span class="item-title"><a href="#">25555252525</a></span>
                            <span class="item-writer"><a href="#">发布者2</a></span>
                            </div>
                        	<span class="time">2019-03-23</span>
                        </li>
                    </ul> 
                </div>
            </div>
        </div>
        <div id="button" >
        	<form>
        	<select>
            	<option>最新时间</option>
                <option>最新创建</option>
                <option>最新收藏</option>
            </select>
            </form>
            <form>
        	<input type="button" value="新建学习空间"/>
            </form>
        </div>
    </div>
    </div>
</body>
</html>
